<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title></title>
        <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.min.js" type="text/javascript"></script>
        <style>
            body{
                z-index: 1;
            }
            #menu
            {
                width: 500px; 
                margin-top:50px;
                position: relative;
                z-index: 3;

            }
            #result
            {
                width: 500px; 
                margin-left: 400px;
                margin-top:-50px;
                position: relative;
                z-index: 2;
            }
            #menu h2
            {
                color: #0000EE;
                text-align: center;
                font-size: 15px;
            }
            #result li{
                list-style-type: none;
                display: inline-block;
                padding: 5px;
                width: 80px;
                height: 80px;
                background-image: url('cercle3.png');
                background-repeat: no-repeat;
            }
            #menu li
            {
                list-style-type: none;
                display: inline-block;
                padding: 10px;
                width: 50px;
                height: 50px;

            }
            #menu li:hover{

                background-image: url('cercle1.gif');
                background-repeat: no-repeat;
                cursor: move;
            }
            #centre, #centre2
            {
                height: 50px;
                width: 300px;
                margin: auto;
                margin-top: 100px;

            }
            .item, .result{
                position: absolute;
            }
        </style>
        <script>
            $('document').ready(function(){
                var decalage = 0;
                var nbBout;   
                var timer;
                
                function cercle(nb, div, centre){
                    var angle = 360 / nb;      
                    nbBout = nb;
                    var posX;
                    var posY;
                    var rayon = 110     ;
                    var centreX = document.getElementById(centre).offsetLeft;
                    var centreY = document.getElementById(centre).offsetTop;
                    var lItem = 20;
                    var i = 1;
                    var item;
                    var b;
 
                    for(b = 0; b < 360; b += angle)
                    {        
                        posX = centreX + 50 + rayon * Math.cos(b * Math.PI / 180);
                        posY = centreY + 50 + rayon * Math.sin(b * Math.PI / 180); 
  
                        item = document.getElementById(div + i);
                        item.className = "item";  
                        item.style.top = (posY - lItem / 2) + "px"; 
                        item.style.left = (posX - lItem / 2) + "px";
                        
                        item.fid = i;
                        item.initY = (posY - lItem / 2);
                        item.initX = (posX - lItem / 2);
                        
                        i++;
                    }
                }
                function setDrag(nb,id){
                    for ( var i=1; i<=nb; i++ ) {
                        //alert(i);
                        $('#item'+i).draggable({
                            revert : true
                        });
                        $('#result'+i).droppable({
                            drop : handleDrop
                        });
//                        $('body').droppable({
//                            drop : function(event, ui){
//                                //console.log(ui);
//                                if(ui.draggable.revert == false)
//                                    ui.draggable.draggable( 'option', 'revert', true);
//                            }
//                        });
                    }                    
                }
                function handleDrop(event, ui) {
                    var dropNumId = $(this).attr('id').substr(-1, 1);
                    var dragNumId = ui.draggable[0].id.substr(-1, 1);
                    //alert(ui.fid);
                    //ui.draggable.revert = false;
                    //if ( dropNumId == dragNumId ) 
                    {
                        //ui.draggable.addClass( 'correct');
                        //ui.draggable.draggable( 'disable' );
                        //$(this).droppable('disable');
                        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
                        ui.draggable.draggable( 'option', 'revert', 'invalid' );
                        $(this).css('background-image', 'url("cercle2.png")');
                        //correctCards++;
                    } 
//                    $.ajax({
//                        type:"POST",
//                        url:'ajax.php',
//                        data: '0=toto&2=tatat',
//                        success : function(response){
//                            //console.log(response);
//                        }
//                    });
                }
                function anim()                {         
                    decalage++;
                    var angle = 360 / nbBout;      
                    var posX;
                    var posY;
                    var rayon = 100;
                    var centreX = document.getElementById("centre").offsetLeft;
                    var centreY = document.getElementById("centre").offsetTop;
                    var lCentre = 20;
                    var lItem = 20;
                    var i = 1;
                    var item
                    var b;

                    for(b = 0; b < 360; b = b + angle)
                    {        
                        posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);
                        posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180); 
  
                        item = document.getElementById("item" + i);
                        item.style.top = (posY - lItem / 2) + "px"; 
                        item.style.left = (posX - lItem / 2) + "px";
                        i++;
                    }  
                }

                //timer = setInterval("anim()",50);

                function stopanim(){
                    clearInterval(timer);         
                }

                function replayanim(){
                    timer = setInterval("anim()",50);
                }
               $('.click').click(function(){
                   var param = $(this).html()
    //               alert($(this).html());
                    var url = 'ajax.php?id=' + param;
                    $('#container').load(url,{myparam : param}, function(e,response) {
                        if(response == 'success'){
                            var len =  $('#menu ul').children().length;
                            cercle(len, 'item', "centre");
                            setDrag(len,'item');
                            //cercle(len, 'result', "centre2");
                        }
                            
                    });
               });
             //   var len = 8;
                           // cercle(8, 'item', "centre");
                      //      setDrag(5,'item');
                      //      cercle(12, 'result', "centre2");
            });
        </script>
    </head>
    <body>
        <div id="links" >
            <ul>
                <li value="1"><a href="#1" class="click">1</a></li>
                <li><a href="#2" class="click">2</a></li>
                <li><a href="#3" class="click">3</a></li>  
            </ul>
        </div>
        <div id="container"></div>
               <div style="margin-bottom: 40px;width: 50px">
        
                </div>
<!--                <div id="menu"> 
                    <div id="centre"></div>
        
                    <ul>
                        <li id="item1" value="1"><img src="image.jpg" width="40" height="40"/></li>
                        <li id="item2" value="2"><img src="image.jpg" width="40" height="40"/></li>
                        <li id="item3" value="3"><img src="image.jpg" width="40" height="40"/></li>
                        <li id="item4" value="4"><img src="image.jpg" width="40" height="40"/></li>
                        <li id="item5" value="5"><img src="image.jpg" width="40" height="40"/></li>

                    </ul>
                </div>
                <div id="result"> 
                    <div id="centre2"></div>
                    <ul>
                        <li id="result1" value="1"></li>
                        <li id="result2" value="2"></li>
                        <li id="result3" value="3"></li>
                        <li id="result4" value="4"></li>
                        <li id="result5" value="5"></li>

                    </ul>
                </div>-->
    </body>
</html>
